<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>18.弹幕效果</title>
</head>
    <style>
        html,body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            font-family: "微软雅黑";
            font-size: 62.5%;
        }
        .boxDom {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        .idDom {
            width: 100%;
            height: 100px;
            background-color: #666;
            position: fixed;
            bottom: 0px;
        }
        .content {
            display: inline-block;
            width: 430px;
            height: 40px;
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            margin: auto;
        }
        .title {
            display: inline;
            font-size: 4em;
            color: white;
        }
        #text {
            height: 27px;
            width: 280px;
            border-radius: 5px;
        }
        #btn {
            background: red;
            color: white;
            font-size: 16px;
            width: 60px;
            height: 29px;
            line-height: 24px;
        }
        #boxDom span{
            /* 一定要绝对定位  否则无法弹幕 不同的top  */
            position: absolute;     
        }
    </style>
<body>
     
    <div class="boxDom" id="boxDom">
        <div class="idDom" id="idDom">
            <div class="content">
                <p class="title">吐槽：</p>
                <input type="text" class="text" id="text">
                <button type="button" class="btn" id="btn">发射</button>
            </div>
        </div>
    </div>



    <script src="../jquery-3.2.1.js"></script>
    <!-- <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script> -->
    <script>
        
        $(function(){
            var colors = ["red","green","pink","#FF99CC","hotpink","yellowgreen","cyan","purple"]
            $("#btn").click(function(){
                var randomColor = parseInt(Math.random() * colors.length); // 随机颜色
                var randomY = parseInt(Math.random() * 400)    // 随机top
                console.log(randomY)
            // 创建span标签 设置内容
                $("<span></span>")  // 创建span
                .text($("#text").val()) // 设置内容
                .css("color", colors[randomColor])  // 设置字体颜色
                .css("left", "1400px")  // 设置left
                .css("top", randomY)    // 设置top 
                .animate({left:-500},10000,function(){
                    $(this).remove();   // 到了终点 就删除
                    // alert("dd");
                })
                .appendTo("#boxDom");
            });

       });


    
    </script>
</body>
</html>